<template>
    <form-field :dirty="dirty" @valid="onValid">
        <form-input :type="type" :value="value" :disabled="disabled" :placeholder="placeholder" @change="onChange" @input="onChange"/>
    </form-field>
</template>
<script lang="ts">
import { defineComponent, Ref, ref } from 'vue'
import FormField from './field.vue'
import FormInput from './input.vue'
export default defineComponent({
    components:{FormField,FormInput},
    props:{
        type:{
            type:String,
            default:"text"
        },
        placeholder:{
            type:String
        },
        value:{
            type:[String,Number]
        },
        disabled:{
            type:Boolean
        }
    },
    setup(props,{emit}) {
        const dirty = ref(props.value)
        let timer = 0
        const onChange = (e:Event)=>{
            const t = e.target as HTMLInputElement
            clearTimeout(timer)
            timer = setTimeout(()=>{
                dirty.value = t.value
            },300)
        }
        const onValid = (e:{valid:boolean,tip:string,v:unknown})=>{
            if(e.valid)
            emit("ph-change",e.v)
        }
        return {
            onValid,
            onChange,
            dirty
        }
    },
})
</script>
